<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>语义化标签的使用</title>
    <style>
        * {
            padding: 0px;
            margin: 0;
        }
        /*IE9以前是不支持HTML5标签的 因为是iMac电脑,就不去测试了*/

        header {
            display: block;
            /*设置为块级元素 */
            width: 100%;
            height: 100px;
            background-color: cornsilk;
        }

        nav {
            display: block;
            /*设置为块级元素 */
            width: 100%;
            height: 88px;
            background-color: green;
        }

        main {
            display: block;
            /*设置为块级元素 */
            width: 100%;
            height: 500px;
            background-color: aliceblue;
        }
        /*行级元素在高度设置里面是无效的 */

        main>article {
            display: block;
            /*设置为块级元素 */
            width: 70%;
            height: 100%;
            background-color: red;
            float: left;
        }

        main>aside {
            display: block;
            /*设置为块级元素 */
            width: 30%;
            height: 100%;
            background-color: rosybrown;
            float: right;
        }

        footer {
            display: block;
            /*设置为块级元素 */
            width: 100%;
            height: 120px;
            background-color: aliceblue;
        }
    </style>

    <!--第一种方式适配: 手动创建标签 -->
    <script>
        //手动创建标签,默认的标签类型都是行级元素,需要使用 display: block; 设置为块级元素
        document.createElement("header")
        document.createElement("nav")
        document.createElement("main")
        document.createElement("article")
        document.createElement("aside")
        document.createElement("footer")
    </script>

    <!--第二种适配: 引入第三方插件 -->
    <!-- <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> -->

    <!-- <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> -->
</head>

<body>

    <header>我是标头</header>
    <nav>我是导航</nav>
    <main>
        <article>我是左边</article>
        <aside>我是右边</aside>
    </main>

    <footer>我是表尾</footer>

</body>

</html>
